import React, { useEffect } from 'react';
import * as echarts from 'echarts';

const ECharts = (props: any) => {
    useEffect(() => {
        var myCharts = echarts.init(document.getElementById('myECharts') as HTMLDivElement);
        const option = {
            color: ['#5793f3', '#675bba', '#d14a61'],
            title: {
                text: '走势图',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新注册用户', '新增订单', '新增管理员']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['bar', 'line'] },
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: props.sevenDay
            },
            yAxis: [
                {
                    type: 'value',
                    name: '用户',
                    min: 0,
                    max: 200,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '订单',
                    min: 0,
                    max: 200,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
            ],
            series: [
                {
                    name: '新注册用户',
                    type: 'line',
                    data: props.sevenData.userCount,
                    yAxisIndex: 1,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                },
                {
                    name: '新增订单',
                    type: 'line',
                    data: props.sevenData.orderCount,
                    yAxisIndex: 1,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                },
                {
                    name: '新增管理员',
                    type: 'line',
                    data: props.sevenData.adminCount,
                    yAxisIndex: 1,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                }
            ]
        }
        myCharts.setOption(option)
    }, [props.sevenDay, props.sevenData])

    return (
        <div style={{ width: '100%' }}>
            <div id="myECharts" style={{ width: '80%', height: '450px', }}></div>
        </div>
    )
}
export default ECharts